<template>
	<view class="container">
		
			<view class="LogisticsInformation_Box" v-if="steps.length>0">
				<view class="LogisticsInformation">
					<view class="Logistics_information">
						<view class="Logistics_informationBox" v-for="(item,index) in steps" :key="index">
							<view class="Logistics_information_left">
								
							</view>
							<view class="Logistics_information_right">
								<view class="imagesimg">
									<view class="imgs" :class="index==0?'wl_Order_placed':''">
									</view>
								</view>
								<view class="content">
									<view class="content_title">{{item.status.text}}</view>
									<view class="content_detail">{{item.create_time}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="information-box" >
				<view class="information-txt">
					<view class="information-name">发票抬头</view>
					 <view class="information-content">{{ invoice_orderData.invoice.title }}</view>
				</view>
				<view class="information-txt">
					<view class="information-name">邮箱</view>
					<view class="information-content">{{ invoice_orderData.invoice.email }}</view>
				</view>
			
			</view>

			<view class="information-box" >
				<view class="information-txt" @click="jump('/pages/mine/invoice/index')">
					<view class="information-name" style="color: #000;">发票中心</view>
					<view class="information-content" style="text-align: right;">更多发票信息<u-icon name="arrow-right" size="32rpx" color="#333"></u-icon></view>
				</view>
			</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				invoice_orderData:{
					invoice:{
						title:'',
						email:''
					}
				},
				form: {},
				list: [],
				show: false,
				steps: [],
			}
		},
		onLoad(options) {
			this.form.order_id = options.order_id;
			this.getInvoice_order()
			this.getInvoiceLogData()
		},
		onShow() {
		},
		methods: {
			getInvoiceLogData() {
				uni.$u.api.getInvoiceLogData(this.form).then(res => {
					this.steps = res
				})
			},
			getInvoice_order() {
				uni.$u.api.getInvoice_order(this.form).then(res => {
					this.invoice_orderData = res
				})
			},
			jump(url) {
			uni.navigateTo({
				url: url
			})
		},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		
	.LogisticsInformation_Box {
				width: 100%;
				background-color: #fff;
				padding:0 30rpx 30rpx;
				border-radius: 30rpx;

				.LogisticsInformation {
					width: 660rpx;
					margin: 0 auto;
					padding: 5rpx 0;

					.Logistics_information {
						width: 700rpx;
						margin: 0 auto;
						margin-top: 40rpx;

						.Logistics_informationBox {
							display: flex;

			

							.Logistics_information_left {
								width: 4rpx;
								background-color: #C9C9C9;
							}

							.Logistics_information_right {
								display: flex;
								height: 130rpx;

								.imagesimg {
									.wl_Order_placed {
										width: 32rpx !important;
										height: 32rpx !important;
										background-color: #386cb9 !important;
										margin-left: -18rpx !important;
										margin-right: 40rpx !important;
									}
									.imgs {
										margin-left: -12rpx;
										width: 19rpx;
										height: 19rpx;
										background-color: #C9C9C9;
										margin-right: 49rpx;
										border-radius: 50%;
									}
								}

								.content {
									.content_title {
										width: 150rpx;
										color: #8A8A8A;
										display: flex;
										justify-content: space-between;

										.content_data {
											color: #8A8A8A;
										}
									}

									.content_detail {
										font-size: 26rpx;
										margin-top: 15rpx;
										width: 500rpx;
										height: 14rpx;
										color: #8A8A8A;
									}
								}
							}
						}

						.Logistics_informationBox:first-child .timesBox {
							font-weight: 500;
							color: #000000 !important;
						}

						// .Logistics_informationBox:last-child .Logistics_information_left {
						// 	width: 0;
						// }

						.Logistics_informationBox:first-child .Logistics_information_right .content .content_title,
						.Logistics_informationBox:first-child .Logistics_information_right .content .content_detail {
							font-weight: 500;
							color: #000000 !important;

						}
					}
				}
			}
.information-box {
	margin: 30rpx 0;
	background-color: #fff;
	padding: 30rpx;
	border-radius: 30rpx;
	.information-txt {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
   		 align-items: center;
		.information-name {
		color: #8A8A8A;
		width: 25%;
			
		}
		.information-content {
			color: #000;
			flex: 1;
		}
	}
}
	}
</style>
